import { Tree, TreeProps } from 'antd';
import { ComponentType } from 'react';
import styled, { css } from 'styled-components';
import { ProductTreeNode } from './types';

interface StyledTreeProps extends TreeProps<ProductTreeNode> {
  mockDisabled?: boolean;
}

export const StyledTree: ComponentType<StyledTreeProps> = styled(
  Tree<ProductTreeNode>,
)<StyledTreeProps>`
  background: transparent;

  & .ant-tree-node-content-wrapper {
    display: flex;
    cursor: ${({ mockDisabled }) => (mockDisabled ? 'not-allowed' : 'pointer')};

    ${({ mockDisabled }) =>
      !mockDisabled &&
      css`
        &:hover {
          background-color: #c1c0ee;
        }
      `}

    .ant-tree-title {
      flex-grow: 1;
    }
  }

  & .product-tree-node-invisible {
    color: rgba(0, 0, 0, 0.45);
  }

  & .ant-tree-node-selected {
    .product-tree-node-invisible {
      color: rgba(255, 255, 255, 0.8);
    }
  }
`;
